<template>
  <div class="cart">
    <div class="top-cart">待发货</div>
    <!-- <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <!-- 渲染购物车商品 -->
    <van-swipe-cell
      v-for="prod in cart"
      :key="prod.id"
    >
      <!-- 商品卡片 -->
      <van-card
        :price="prod.price | money"
        :title="prod.title"
        :num = "prod.amount"
      >
        <!-- 自定义缩略图-->
        <template #thumb>
          <!-- 商品图片 -->
          <div class="van-image"
            style="width: 75%; height: 100%;">
            <img :src="prod.image" class="van-image_img" style="object-fit: cover;" @click="$router.push('/detail/7068050')">
          </div>
        </template>
      </van-card>
    </van-swipe-cell>

    <!-- 联系卖家 -->
    <van-submit-bar :price="totalMoney">
       <template #button>
        <van-button  @click="lianxi" round type="info" class="confirm-botton">联系卖家</van-button>
        <van-button @click="shouhou" round type="info" class="confirm-botton">申请售后</van-button>
      </template>
    </van-submit-bar>

    <!-- 订单信息 -->
    <!-- 输入任意文本 -->
    <van-field v-model="text" label="订单信息" />
    <!-- 允许输入正整数 -->
    <van-field v-model="tel" type="tel" label="订单编号" />
    <!-- 允许输入正整数，调起纯数字键盘 -->
    <van-field v-model="digit" type="digit" label="支付宝交易号" />
    <van-field v-model="number1" type="text"  label="创建时间" />
    <van-field v-model="number2" type="text"  label="交易时间" />

  </div>
</template>

<script>

export default {
  name: 'Cart',
  data() {
    return {
      text: '',
      tel: '24354657678909',
      digit: '4354568799876535677',
      number1: '2022-04-02 09:26:22',
      number2: '2022-04-02 09:26:22',

    }
  },
  computed: {
    cart() {
      return this.$store.state.cart.list
    },
    totalMoney() {
      return this.$store.getters['cart/totalMoney']
    },
  },
  methods: {
    lianxi() {
      return this.$toast({
        message: '亲亲，小二正在赶来...',
        icon: 'like-o',
      })
    },
    shouhou() {
      return this.$toast({
        message: '亲亲，不退哦...',
        icon: 'like-o',
      })
    },
  },
}
</script>

<style lang="less" scoped>
  .top-cart{
    width: 100%;
    height: 200px;
    background-color: #c1ab96;;
    font-size: 28px;
    text-align: left;
    color: #fff;
    font-weight: 888;
    line-height: 200px;
    padding-left: 30px;
  }
  .cart {
    padding-bottom: 168px;
  }
  .goods-card {
    margin: 0;
    background-color: #fff;
  }

  /deep/ .van-card__thumb {
    display: flex;
    width: 120px;
  }

  .bottom-button {
    width: 250px;
    height: 100px;
    font-size: 15px;
    background-color: rgb(238, 189, 106);
    border: none;
  }
  .confirm-botton{
    background-color: rgb(240, 208, 152);
    width: 180px;
    height: 80px;
    border: none;
  }
  .van-image_img{
    width: 100px;
    height: 100px;
    border-radius: 3px;
  }
  .confirm-botton{
    margin: 0 6px;
  }
  .van-card{
    border:1px solid #c1ab96;
    border-radius: 10px;
    margin-top: 15px;
    height: 120px;
    margin-left: 10px;
    margin-right: 13px;
  }
</style>
